<template>
    <div id="markers">
        <svg id="chart"  width="1060" height="600">
        </svg>
    </div>
</template>

<script>
export default {
  methods: {
    init() {
      var params = { top: 60, bottom: 60, left: 60, right: 60 };
      var svg = this.d3.select("#chart");
      var width = svg.attr("width"); //得到画布的宽
      var height = svg.attr("height");
      var g = svg
        .append("g")
        .attr("transform", `translate(${params.top},${params.left})`)
      let dataset = [10, 20, 30, 23, 13, 40, 27, 35, 20]
      let rectPadding = 40

      // 计算X轴的等分比例，(总长度-左右边距)/数组长度
      let xScale = this.d3
        .scaleBand()
        .domain(this.d3.range(dataset.length))
        .rangeRound([0, width - params.left - params.right]);
      let xAxis = this.d3.axisBottom(xScale)

      // 计算y轴的等分比例
      let yScale = this.d3
        .scaleLinear()
        .domain([0, this.d3.max(dataset)])
        .range([height - params.top - params.bottom, 0])
      var yAxis = this.d3.axisLeft(yScale)


      //  <defs>
      //         <marker id="arrow" markerWidth="10" markerHeight="10" refx="0" refy="3" orient="auto" markerUnits="strokeWidth">
      //           <path d="M0,0 L0,6 L9,3 z" fill="#f00" />
      //         </marker>
      //       </defs>

      let defs = svg.append('defs')
      let arrowMarker = defs.append('marker')
        .attr("id","arrow")
        .attr("markerUnits","strokeWidth")
        .attr("markerWidth","10")
        .attr("markerHeight","10")
        .attr("refx","0")
        .attr("refy","-20")
        .attr("orient","auto");

      let arrow_path = "M0,0 L0,6 L-7,6 z";
     arrowMarker.append('path').attr('d',arrow_path).attr('fill','#f00')

        //绘制直线
      var line = g.append("line")
        .attr("x1",0)
        .attr("y1",-30)
        .attr("x2",0)
        .attr("y2",height-params.bottom-params.top)
        .attr("stroke",'black')
        .attr("stroke-width",2)
      g.append('line')
        .attr('x1',0)
        .attr('y1',-30)
        .attr('x2',-10)
        .attr('y2',-15)
        .attr("stroke",'black')
        .attr("stroke-width",2)
      g.append('line')
        .attr('x1',0)
        .attr('y1',-30)
        .attr('x2',10)
        .attr('y2',-15)
        .attr("stroke",'black')
        .attr("stroke-width",2)
        // .attr("marker-start","url(#arrow)")

      //添加X轴
      g
        .append("g")
        .attr(
          "transform",
          `translate(0,${height - params.top - params.bottom})`
        )
        .call(xAxis);
      //添加Y轴
      g
        .append("g")
        .attr("transform", "translate(0,0)")
        .call(yAxis);

      // 添加x,y轴文字说明
      g
        .append("text")
        .attr("x", width - params.left - params.right)
        .attr("y", height - params.top - params.bottom + 20)
        .text("x轴");
      g
        .append("text")
        .attr("x",10)
        .attr("y",0)
        .text("y轴");

      var chartHeight = height - params.top - params.bottom;
      var gs = g
        .selectAll(".rect")
        .data(dataset)
        .enter()
        .append("g");

      gs
        .append("rect")
        .attr("x", (d, i) => {
          return xScale(i) + rectPadding / 2
        })
        .attr("y", (d, i) => {
          return yScale(d);
        })
        .attr("width", (d, i) => {
          return xScale.step() - rectPadding
        })
        .attr("height", (d, i) => {
          return chartHeight - yScale(d)
        })
        .attr("fill", "whitesmoke")

      //绘制文字
      gs
        .append("text")
        .attr("x", (d, i) => {
          return xScale(i) + rectPadding / 2 - 10
        })
        .attr("y", d => {
          return yScale(d) - 22;
        })
        .attr("dx", () => {
          return (xScale.step() - rectPadding) / 2
        })
        .attr("dy", 20)
        .text(d => {
          return d
        })
        .attr("fill", "blue")
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style>
#chart {
  background: white;
}
</style>

